{% extends "showinfo/base.html" %}

{% block content %}

    <br/>


       <div class="form-group">
        <label class="col-lg-3 control-label">城市名称</label>

        <div class="col-lg-4">
            <input type="text" class="form-control" name="cityname" id="cityname" placeholder="城市名称"/>
        </div>
        <div class="col-lg-4">
            <input type="button" class="btn btn-primary" value="查看天气" onclick="getdata()"></button>
        </div>
     <br/>
    <br/>
    <br/>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <table class="table" id="weathertable">
                    <thead>
                    <tr>
                        <th>
                            日期
                        </th>
                        <th>
                            最高温度/最低温度
                        </th>
                        <th>
                            白天/夜间天气
                        </th>
                        <th>
                            降水概率
                        </th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>

            </div>
        </div>
    </div>

    <div class="alert alert-success" role="alert" id="suggestion">

    </div>
    <div id="container" style="min-width:400px;height:400px"></div>



{% endblock %}

{% block footer %}


    <script language="javascript" type="text/javascript">

        String.format = function (src) {
            if (arguments.length == 0) return null;
            var args = Array.prototype.slice.call(arguments, 1);
            return src.replace(/\{(\d+)\}/g, function (m, i) {
                return args[i];
            });
        };

        function getdata() {
            var url = "{% url "getapis:weather" "gg" %}";

            var city = $("#cityname").val();
            if (city.length == 0) {
                city = "西安";
            }

            url = url.replace("gg", city);
            console.log(city);
            console.log(url);


            $.getJSON(url, function (result) {

                if (result[0].code != "200") {
                    alert(result[0].msg);
                    return false;
                }
                $("#suggestion").html(result[0].brf + '<br />' + result[0].txt);
                var cityname = result[0].city;
                var qlty = result[0].qlty;
                var tmp = result[0].tmp;
                var daily = result[0].daily;
                $("#tbody").html('');
                $.each(daily, function (i, item) {
                    //$("#weathertable").append('<tr><td>'+item.date+'</td><td>'+)

                    var s = '<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td></tr>';
                    var strs = String.format(s, item.date, item.tmp.max + '/' + item.tmp.min, item.cond.txt_d + '/' + item.cond.txt_n, item.pop);
                    $("#tbody").append(strs);
                });


                var x = new Array();
                var mintmp = new Array();
                var maxtmp = new Array();

                $.each(tmp, function (i, item) {
                    //console.log(item[0].date);
                    x.push(item[0].date);
                    maxtmp.push(parseInt(item[0].tmpmax))
                    mintmp.push(parseInt(item[0].tmpmin))
                });

                console.log(maxtmp)
                $('#container').highcharts({
                    title: {
                        text: cityname + '未来七天最高温度和最低温度<br />空气质量:' + qlty,
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: lylinux.org',
                        x: -20
                    },
                    xAxis: {
                        categories: x
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: '最低温度',
                        data: mintmp
                    },
                        {
                            name: '最高温度',
                            data: maxtmp
                        }
                    ]
                });
            });
        }


        $(function () {
            getdata();

        });
    </script>
{% endblock %}